<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网站埋点解决方案</title>
    <style>
      .button {
        justify-content: center;
        align-items: center;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        transition: 0.1s;
        -webkit-user-select: none;
        user-select: none;
        vertical-align: middle;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="block">
        <h2>一、支持的埋点事件</h2>
        <div>绑定埋点事件时，右侧的值均为 elementName</div>
        <div>
          <div>
            <h3>1. 监听元素点击：</h3>
            <div>&lt;div data-track-click="submit-event">提交&lt;/div></div>
            <h3>2. 监听区域访问：</h3>
            <div>&lt;div data-track-areavisit="submit-form">&lt;/div></div>
            <h3>3. 监听元素曝光：</h3>
            <div>&lt;div data-track-elementview="product-card">&lt;/div></div>
          </div>
        </div>
      </div>
      <div class="block">
        <h2>二、获取指定元素的值</h2>
        <div>
          <div>
            设置 data-track-params
            属性获取元素值，支持用选择器选择目标元素，支持的选择器前缀：['#',
            '.', '[']，其他格式的输入会被当作属性值
          </div>
          <div>
            <span>1. 获取输入框的值：</span>
            <input
              type="text"
              id="username"
              name="username"
              placeholder="获取input-value"
              value="13888888888"
            />
          </div>
          <div>
            <span>2. 获取元素的 innerText：</span>
            <span class="div-test">号码之家</span>
          </div>
          <div
            class="button"
            data-track-click="submit-event"
            data-track-params="username: #username, user_name: [name='username'], text: .div-test, pageName: 覆盖初始化时的 pageName 参数"
          >
            提交
          </div>
        </div>
      </div>
      <div class="block">
        <h2>三、设置计数器</h2>
        <div>
          一些埋点有计数器需求，比如按钮点击了几次、区域曝光了几次，数据放在
          ext_params 中
        </div>
        <div>格式：data-track-counter="eventName,eventName..."</div>
        <div>
          <div
            class="button"
            data-track-elementview="counter-btn"
            data-track-click="counter-btn"
            data-track-counter="click,elementview"
          >
            计数器示例按钮
          </div>
        </div>
      </div>
      <div class="block">
        <h2>四、使用自定义函数获取埋点数据</h2>
        <pre>
    new Tracker({
      customFnMap: {
        getProductInfo() {
          return {
            productName: '测试商品信息',
            timestamp: Date.now()
          }
        }
      }
    })</pre
        >
        <div>
          <div
            class="button"
            data-track-click="tap-product"
            data-track-fn="getProductInfo"
          >
            调用 getProductInfo() 方法获取埋点数据
          </div>
        </div>
      </div>
      <div class="block">
        <h2>五、监听区域访问</h2>
        <div>点击区域记录一次，点击区域外记录一次</div>
        <pre>data-track-areavisit="formentry,formleave"</pre>

        <div
          style="background: red; height: 1rem"
          data-track-areavisit="formentry,formleave"
        >
          <div>
            <span>联系电话</span>
            <input type="text" value="13999999999" id="areavisit-input" />
          </div>
          <div
            class="button"
            data-track-click="submit-event-2"
            data-track-params="username: #areavisit-input"
          >
            提交
          </div>
        </div>
      </div>
      <div class="block">
        <h2>六、监听元素曝光</h2>
        <pre>data-track-elementview="product-card"</pre>
        <div
          data-track-elementview="product-card"
          style="height: 1rem; background: red"
        >
          假装自己是一个卡片
        </div>
      </div>
    </div>
    <script type="module" src="./index.js"></script>
  </body>
</html>
